* {
  margin: 0;
  padding: 0;
}
.logo{
  position: absolute;
  left: 240px;
  top: 34px;
}
ul{
  width: 950px;
  height: 50px;
  border: 1px solid #e0e0e0;
  position: relative;
  left: 160px;
}
ul>li{
  float: left;
  list-style: none;
  margin-left: 80px;
  line-height: 50px;
  position: relative;
}
li::after{
  content: "|";
  display: block;
  height: 30px;
  width: 1px;
  position: absolute;
  left: 90px;
  top: 0;
}
article{
  position: relative;
}
article>img{
  position: absolute;
  left: 162px;
  top: -114px;
  z-index: 0;
}
article>a{
  position: absolute;
  left: 270px;
  top: 280px;
}
section{
  position: relative;
  top: 370px;
  height: 500px;
  width: 949px;
  border: 1px solid #e0e0e0;
  left: 160px;
}
/* 三个圆下面的图片 */
section>div:nth-child(1) img{
  position:absolute;
  top: -150px;
}
/* 第一个圆 */
.dygy{
  background-image: url(../images/mp-pag-1.png);
  width: 141px;
  height: 141px;
  position: absolute;
  left: 220px;
  top: -100px;
}
.dygy>p{
  color: white;
  font-size: 20px;
  position: absolute;
}
.dygy>p:nth-child(1){
  top: 10px;
  left: 50px;
  font-size: 50px;
}
.dygy>p:nth-child(2){
  top: 50px;
  left: 20px;
}
.dygy>p:nth-child(3){
  top: 70px;
  left: 20px;
}
/* 第二个圆 */
.degy{
  background-image: url(../images/mp-pag-2.png);
  width: 141px;
  height: 141px;
  position: absolute;
  top: -100px;
  left: 380px;
}
.degy>p{
  color: white;
  font-size: 20px;
  position: absolute;
}
.degy>p:nth-child(1){
  top: 50px;
  left: 14px;
}
.degy>p:nth-child(2){
  top: 70px;
  left: 20px;
}
/* 第三个圆 */
.dsgy{
  background-image: url(../images/mp-pag-3.png);
  width: 141px;
  height: 141px;
  position: absolute;
  top: -100px;
  left: 540px;
}
.dsgy>p{
  color: white;
  font-size: 20px;
  position: absolute;
}
.dsgy>p:nth-child(1){
  top: 50px;
  left: 9px;
}
.dsgy>p:nth-child(2){
  top: 70px;
  left: 20px;
}
/* 标题 */
.bt{
  position: absolute;
  top: 150px;
  color:#e0e0e0;
  width: 405px;
  left: 300px;
}
.bt>h1:nth-child(2){
  margin-left: 40px;
}
/* ABCD四个框框 */
.ABCD{
  display: flex;
  margin-top: 280px;
  margin-left: 45px;
}
.dl{
  width: 140px;
  height: 96px;
  position: absolute;
  left: 55px;
  top: 10px;
}
/* A框 */
.A{
  position: relative;
}
.A>h1{
  font-size: 50px;
}
.A>div>p{
  margin-bottom: 40px;
}
/* B框 */
.B{
  position: relative;
  left: 160px;
}
.B>h1{
  font-size: 50px;
  color: orange;
}

.B>div>p{
  margin-bottom: 40px;
  color: orange;
}
/* C框 */
.C{
  position: relative;
  left: 310px;
}
.C>h1{
  font-size: 50px;
  color: #bfae3f;
}
.C>div>p{
  margin-bottom: 60px;
  color: #bfae3f;
}
/* D框 */
.D{
  position: relative;
  left: 470px;
}
.D>h1{
  font-size: 50px;
  color: #c5c5c5;
}
.D>div{
  width: 220px;
  height: 96px;
  position: absolute;
  left: 55px;
  top: 10px;
  color: #c5c5c5;
}
.D>div>p{
  margin-bottom: 18px;
}
aside{
  height: 400px;
  width: 949px;
  border: 1px solid #c5c5c5;
  position: relative;
  top: 370px;
  left: 160px;
}
.welcome{
  width:600px;
  height: 100px;
  margin-left: 50px;
  margin-top: 30px;
}
.welcome>p{
  color: #b9b9b9;
  margin-top: 10px;
}
.srt{
    margin-top: 80px;
    margin-left: 30px;
}
.srt>div{
  display: inline-block;
  margin-left: 20px;
}
/* 第一张图 */
.dyz>p,.dyz>span{
    position: relative;
    left: 104px;
}
.dyz>span{
    font-size: 10px;
    left: 125px;
    color: #b9b9b9;
}
/* 第二张图 */
.dez>p,.dez>span{
    position: relative;
    left: 94px;
}
.dez>span{
    font-size: 10px;
    left: 104px;
    color: #b9b9b9;
}
/* 第三张图 */
.dsz>p,.dsz>span{
    position: relative;
    left: 60px;
}
.dsz>span{
    left: 80px;
    color: #b9b9b9;
    font-size: 10px;
}
/* 右边文字 */
.ys{
    width: 280px;
    height: 190px;
    border-bottom: solid 1px #b9b9b9;
    position: absolute;
    left: 650px;
    top: 30px;
}
.ys>h3{
    margin-top: 20px;
    margin-bottom: 20px;
}
.ys>p{
    font-size: 13px;
}
/* 右下文字 */
.yx{
    width: 280px;
    height: 190px; 
    position: absolute;
    left: 650px;
    top: 230px;
}
.yx>h3,.yx>p{
    margin-bottom: 10px;
}
.yx>a{
    margin-left: 140px;
}
footer{
    height: 224px;
    width: 949px;
    border: 1px solid #e0e0e0;
    background-color: #e9e9e9;
    margin-left: 160px;
    margin-top: 370px;
}
.sdh{
    display: flex;
    position: relative;
    left: 30px;
    top: 40px;
}
.sdh>.dyd{
    margin-left: 20px;
}
.dyd>p{
    font-size: 13px;
    margin-top: 10px;
}
.dyd>p>a{
    color: #9ba6aa;
}
.you{
    position: relative;
    left: 700px;
    width: 300px;
    top: -100px;
}
.you>div{
    width: 248px;
    height: 102px;
    background-color: white ;
    margin-left: -10px;
}
.you>div>p{
    font-size: 14px;
    align-items: center;
    justify-content: center;
}
.you>div>p::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 20px solid white;
    border-left-color:transparent ;
    border-bottom-color:transparent ;
    position: absolute;
    left: 180px;
}
.you>div>h4{
    margin-top: 20px;
}
.you>div>h4>span{
    font-size: 10px;
    color: #c5c5c5;
}
.footer-logo{
    margin-left: 160px;
    margin-top: 50px;
    position: relative;
}
.youlogo{
    position: absolute;
    top: 30px;
    left: 880px;
}